import React, { Component } from 'react';
import { Tree, Typography, Checkbox, Card, Image, Upload, Button, message, Col, Row } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import { connect } from 'dva';
import { UploadOutlined, FileZipOutlined, FileImageOutlined } from '@ant-design/icons';
import style from './index.less';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { getToken, getMd5 } from '@/utils/utils';
import { getOptAuthHeaders } from '@/utils/common';

const mapStateToProps = (state: any) => ({
  user: state.user,
  userInfo: state.menu.userProfile,
});
class appImgConfig extends Component<any, any> {
  state = {
    treeData: [
      /* {
        title: 'parent 1',
        key: '0-0',
        children: [
          {
            title: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
                title: 'leaf',
                key: '0-0-0-0',
              },
            ],
          },
        ],
      }, */
    ],
    colorList: [
      /* {
        title: '红色',
        key: 'red',
        id: '',
        code: '',
      }, */
    ],
    allList: [
      {
        code: 'ALL',
        id: 'ALL',
        key: 'ALL',
        title: '不区分颜色',
      }
    ],
    homeItem: {
      id: 0,
      key: "0-1",
      code: 'HOME-PAGE',
      level: 1,
      parentId: null,
      sortIndex: 0,
      title: '首页',
      children: [],
    },
    colorStatus: false, //  不区分颜色状态
    // 显示勾选的功能
    imgList: {},
    // img数据保存
    imgData: {},
  };
  
  componentDidMount() {
    const { onRef } = this.props;
    if (onRef) {
      onRef(this)
    }
  }

  //  tree 转 array
  treeToArray(tree: any) {
    let res: any = [];
    for (const item of tree) {
      const { children, sid, itemName, level, itemNumber, ...i } = item;
      if (children && children.length) {
        res = res.concat(this.treeToArray(children));
      }
      res.push({
        title: itemName,
        code: itemNumber,
        key: `${sid}-${level}`,
        id: sid,
        level,
        ...i
      })
    }
    return res
  }

  arrayToTree(items: any) {
    let res = []; // 存放结果集
    let map = {};
    // 判断对象是否有某个属性
    let getHasOwnProperty = (obj: any, property: any) => Object.prototype.hasOwnProperty.call(obj, property);
    // 边做map存储，边找对应关系
    for (const i of items) {
        map[i.id] = {
            ...i,
            children: getHasOwnProperty(map, i.id) ? map[i.id].children : []
        }
        const newItem = map[i.id];
        if (i.parentId === null) {
            res.push(newItem);
        } else {
            if (!getHasOwnProperty(map, i.parentId)) {
                map[i.parentId] = {
                    children: []
                }
            }
            map[i.parentId].children.push(newItem);
        }
    }
    return res
  }

  //  设置功能结构树数据
  setAppAppConfigData(data: any) {
    if (!(data && data.data)) {
      this.setState({
        treeData: []
      })
      return
    }
    const { homeItem } = this.state;
    if (data.data.length >= 0) {
      let tempArray = this.treeToArray(data.data);
      let tempTree: any[] = this.arrayToTree(tempArray);
      tempTree.unshift(homeItem);
      this.setState({
        treeData: tempTree
      })
    }
  }

  //  设置颜色配置数据
  setColorConfigData(data: any) {
    if (!data) {
      this.setState({
        colorList: []
      })
    }
    let tempList: any = [];
    if (data.length > 0) { 
      data.forEach((item:any) => {
        const { code, name, sid } = item;
        tempList.push({
          title: name,
          key: sid,
          id: sid,
          code
        })
      })
    }
    this.setState({
      colorList: tempList
    })
  }

  //  重置所选功能、已上传图片数据
  resetAppImgData = () => {
    this.setState({
      imgList: {},
      imgData: {},
    })
  }

  //  重置颜色配置、功能结构树数据
  resetConfigData = () => {
    this.setState({
      treeData: [],
      colorList: [],
    })
  }

  setConfig = (configData: any, colorData: any, treeData: any) => {
    // 设置数据
    if (!configData) {
      return
    }
    //  设置不区分颜色状态
    const { isTypeUniversal } = configData;
    this.setState({
      colorStatus: !!isTypeUniversal
    })
    //  车型组颜色数据
    this.setColorConfigData(colorData);
    const tempChecked = {};  // 获取已选功能（true/false）
    const tempImgData = {}; //  图片数据
    configData.appPictureConfigEntity && configData.appPictureConfigEntity.forEach((item: any) => {
      const tempColorId = item.vehicleColor;
      item.remoteImgList.forEach((img: any) => {
        const cmCheckStatus = img.imgUrlMap.imgUrl.length > 0;
        const bjCheckStatus = img.imgUrlMap.imgBackgroundUrl.length > 0;
        // /*** 只要有一个车身颜色勾选某功能，则此功能 check 为true，并不再重新赋值
        if (!tempChecked[`${img.remoteCtlId}_cmCheck`]) {
          tempChecked[`${img.remoteCtlId}_cmCheck`] = cmCheckStatus;
        }
        if (!tempChecked[`${img.remoteCtlId}_bjCheck`]) {
          tempChecked[`${img.remoteCtlId}_bjCheck`] = bjCheckStatus;
        }
        // *** ./
        if (cmCheckStatus) {
          tempImgData[`${tempColorId}__cmCheck__${img.remoteCtlId}__${img.remoteCtlCode}`] = [{
            fileUri: img.imgUrlMap.imgUrl
          }]
        }
        if (bjCheckStatus) {
          tempImgData[`${tempColorId}__bjCheck__${img.remoteCtlId}__${img.remoteCtlCode}`] = [{
            fileUri: img.imgUrlMap.imgBackgroundUrl
          }]
        }
        if (item.remoteFileName) {
          tempImgData[`${tempColorId}__remote__0__remote`] = [{
            fileName: item.remoteFileName,
            fileUri: item.remoteImgUrl,
          }]
        }
      })
    })

    const tempHomeItem = {
      code: 'HOME-PAGE',
      id: 0,
      key: '0-1',
      level: 1,
      parentId: null,
      sortIndex: 0,
      title: '首页'
    }
    //  整理APP功能tree数据
    let tempList = this.treeToArray(treeData); //  扁平化
    tempList.unshift(tempHomeItem);
    let tempCheckedApp = {};  //  已选功能数据
    //  设置功能勾选状态
    let toTreeList = tempList.map((item: any) => {
      const { key, id, code, picType, title } = item;
      const tempCmKey = `${item.id}_cmCheck`;
      const tempBjKey = `${item.id}_bjCheck`;
      const tempCmCheckStatus = !!tempChecked[tempCmKey];
      const tempBjCheckStatus = !!tempChecked[tempBjKey];
      if (tempCmCheckStatus) {
        tempCheckedApp[tempCmKey] = {
          key,
          id,
          code,
          picType: 'cmCheck',
          title,
        }
      }
      if (tempBjCheckStatus) {
        tempCheckedApp[tempBjKey] = {
          key,
          id,
          code,
          picType: 'bjCheck',
          title,
        }
      }
      return {
        cmCheck: tempCmCheckStatus,
        bjCheck: tempBjCheckStatus,
        ...item
      }
    })
    //  功能tree数据
    const tempTree: any[] = this.arrayToTree(toTreeList);
    this.setState({
      treeData: tempTree
    });
    this.setState({
      imgData: tempImgData,
      imgList: tempCheckedApp,
    });
  };
  
  getConfig = () => {
    // 检查imgData数据 隐藏多余数据
    // 检查每个节点是否上传了图片，否则提示错误
    // 输出数据
  };
  uploadImgFn = (item: any) => {
    // 上传地址
    const action = `${window.g.url}/vehicle/image/upload?bizType=m18`;
    let md5 = getMd5('bizType=m18');
    // 生成上传组件
    const { imgList = {}, imgData = {} } = this.state;
    const arr = Object.values(imgList);
    arr.push({
      type: 'zip',
      title: '远控图片',
      key: 'remote',
      code: 'remote',
      id: 0,
      picType: 'remote',
    });
    const zipItem = (x: any) => (
      <div
        style={{
          height: 150,
          width: '100%',
          lineHeight: '185px',
          textAlign: 'center',
        }}
      >
        <div style={{ height: 120 }}>
          <svg
            t="1673517346766"
            className="ali-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2164"
            width="60"
            height="60"
          >
            <path
              d="M659.72 64.81H270.4c-78.06 0-141.33 63.28-141.33 141.33v612.95c0 78.06 63.28 141.33 141.33 141.33h485.49c78.06 0 141.33-63.28 141.33-141.33V302.3c0-31.83-12.64-62.35-35.15-84.85l-117.5-117.5a120.008 120.008 0 0 0-84.85-35.14z"
              fill="#FFC757"
              p-id="2165"
            ></path>
            <path
              d="M304.85 196.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 196.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM304.85 396.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 396.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM455.65 552.02H321.52c-17.07 0-30.91 13.84-30.91 30.91v155.48c0 17.07 13.84 30.91 30.91 30.91h134.13c17.07 0 30.91-13.84 30.91-30.91V582.93c0-17.07-13.84-30.91-30.91-30.91z m-4.93 164.59c0 13.72-11.12 24.84-24.84 24.84h-74.6c-13.72 0-24.84-11.12-24.84-24.84v-27.36c0-13.72 11.12-24.84 24.84-24.84h74.6c13.72 0 24.84 11.12 24.84 24.84v27.36zM862.07 217.45l-117.5-117.5a120.001 120.001 0 0 0-61.75-32.9v131.88c0 41.87 33.94 75.81 75.81 75.81H894a120.021 120.021 0 0 0-31.93-57.29z"
              fill="#F79F2B"
              p-id="2166"
            ></path>
            <path
              d="M304.85 184.81h71.52c7.86 0 14.24-6.38 14.24-14.24V99.05c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 184.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM304.85 384.81h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.87-6.38-14.24-14.24-14.24h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.86 6.38 14.24 14.24 14.24zM476.37 384.81h-71.52c-7.86 0-14.24 6.38-14.24 14.24v71.52c0 7.87 6.38 14.24 14.24 14.24h71.52c7.86 0 14.24-6.38 14.24-14.24v-71.52c0-7.86-6.38-14.24-14.24-14.24zM455.65 540.02H321.52c-17.07 0-30.91 13.84-30.91 30.91v155.48c0 17.07 13.84 30.91 30.91 30.91h134.13c17.07 0 30.91-13.84 30.91-30.91V570.93c0-17.07-13.84-30.91-30.91-30.91z m-4.93 164.59c0 13.72-11.12 24.84-24.84 24.84h-74.6c-13.72 0-24.84-11.12-24.84-24.84v-27.36c0-13.72 11.12-24.84 24.84-24.84h74.6c13.72 0 24.84 11.12 24.84 24.84v27.36z"
              fill="#FFFFFF"
              p-id="2167"
            ></path>
          </svg>
        </div>
        <div style={{ display: 'inlien-block', height: 30, lineHeight: '30px' }}>
          <Ellipsis length={14} tooltip>
            {/* {imgData[x.key]?.fileName} */}
          </Ellipsis>
        </div>
      </div>
    );

    const newArr = arr.map((x: any) => {
      const { picType, id, code } = x;
      // console.log(item, item.code, imgData, picType, id, code);
      const arrImgList = imgData[`${item.id}__${picType}__${id}__${code}`] || [];
      const imgUrl = arrImgList[0]?.fileUri;
      const isType = x?.type === 'zip';
      const isLoading = arrImgList[0]?.status === 'uploading';
      const fallback =
        '';
      // const colKey = `${item.id}-${x.key}`
      return (
        <Col span={8} key={x.key}>
          <Card
            type="inner"
            title={x?.title}
            cover={
              isType && imgUrl ? (
                zipItem(x)
              ) : isType ? (
                <FileZipOutlined
                  style={{
                    height: 150,
                    fontSize: '58px',
                    lineHeight: '150px',
                  }}
                />
              ) : imgUrl ? (
                <Image alt={x?.title} height={150} src={imgUrl} fallback={fallback} />
              ) : (
                <FileImageOutlined style={{ height: 150, fontSize: '58px', lineHeight: '150px' }} />
              )
            }
            actions={[
              <Upload
                accept={isType ? '.zip' : 'image/*'}
                action={action}
                showUploadList={false}
                maxCount={1}
                fileList={arrImgList}
                onChange={e => this.handleChange(e,item.id, x, isType)}
                beforeUpload={e => this.beforeUpload(e, isType ? 10 : 5)}
                headers={{ OptAuthorization: `${getToken()}`,...getOptAuthHeaders(), shaSign: md5,}}
                disabled={isLoading}
              >
                <Button loading={isLoading}>
                  <UploadOutlined />
                </Button>
              </Upload>,
            ]}
          ></Card>
        </Col>
      );
    });

    return newArr;
  };
  beforeUpload = (file: any, size: number) => {
    const isImg = size === 5; // 5m-图片 10m-文件
    const isType = isImg
      ? file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      : file.name.endsWith('.zip');
    if (!isType) {
      message.error(`${isImg ? '只能上传JPG、PNG或GIF图片!' : '只能上传zip文件!'}`);
    }
    const isLt = file.size / 1024 / 1024 < size;
    if (!isLt) {
      message.error(`大小不能大于${size}MB!`);
    }
    return isType && isLt;
  };
  //  info: 文件，colorIdx：颜色id，configData：功能，isType：文件类型（true：zip，false：image）
  handleChange = (info, colorIdx, configData, isType, isRemote = false) => {
    const { imgData } = this.state;
    const { picType, id, code } = configData;
    imgData[`${colorIdx}__${picType}__${id}__${code}`] = info.fileList;
    this.setState({
      imgData,
    });
    if (info.file.status === 'done') {
      if (info.file.response && info.file.response.responseCode == '200') {
        message.success('上传成功');
        // 2.读取响应并显示文件链接
        // let newUrl = info.file.response?.fileRecordList[0].fileUri;
        // const { vehicleColorList, checkedList } = this.state;
        // const imgList = vehicleColorList[colorIdx] || {
        //   vehicleColor: checkedList[colorIdx],
        //   vehicleColorName: colorsOptions.find(opt => opt.value === checkedList[colorIdx])?.label,
        // };
        // imgList[type] = newUrl;
        // if (isRemote) {
        //   imgList['remoteFileName'] = info.file.name;
        // }
        // vehicleColorList[colorIdx] = imgList;
        // this.setState({
        //   fileList: info.file.response.fileRecordList,
        //   vehicleColorList,
        // });
        imgData[`${colorIdx}__${picType}__${id}__${code}`] = info.file.response.fileRecordList;
        this.setState({
          imgData,
        });
      } else {
        message.error('上传失败');
      }
    } else if (info.file.status === 'error') {
      message.error('文件上传服务器不可用');
    } else if (info.file.status === 'removed') {
      // message.success('图片删除成功');
      // if (maxCount != null && maxCount > 1) {
      //   let newUrl = '';
      //   info.fileList.map((file, index) => {
      //     if (index > 0) {
      //       newUrl = newUrl + ',';
      //     }
      //     if (file.response) {
      //       newUrl = newUrl + file.response.data.fileUrl;
      //     } else {
      //       newUrl = newUrl + file.url;
      //     }
      //     return file;
      //   });
      //   onUploadSuccess(formItem, newUrl);
      // } else {
      //   onUploadSuccess(formItem, '');
      // }
    }
  };

  //  校验所有勾选的功能是否上传图片
  checkAllImg() {
    const { colorList, allList, imgList, imgData, colorStatus } = this.state;
    //  colorList 车身颜色；imgList 勾选功能；imgData 图片数据
    const tempList = colorStatus ? allList : colorList;
    const picKeys = Object.keys(imgData);
    const checkedConfig = Object.values(imgList);
    /* checkedConfig.push({
      type: 'zip',
      title: '远控图片',
      key: 'remote',
      code: 'remote',
      id: 0,
      picType: 'remote',
    }) */
    const colorNum = tempList?.length;
    const checkedConfigNum = checkedConfig?.length;
    const total = colorNum * checkedConfigNum;  //  所需图片总数
    if (!(total > 0)) {
      message.error('请至少勾选一个功能');
      return false;
    }

    const configKeys: string[] = [];  //  勾选功能所需图片 key
    if (tempList && tempList.length > 0 && checkedConfig) {
      tempList.forEach(item => {
        checkedConfig.forEach((c: any) => {
          const tempKey = `${item.id}__${c.picType}__${c.id}__${c.code}`;
          configKeys.push(tempKey);
        })
      })
    }
    //  true：存在勾选功能的图片没传；false：勾选功能的图片均已上传；
    const tempStatus = configKeys.some(k => {
      return picKeys.indexOf(k) === -1;
    })

    if (tempStatus) {
      message.error('请上传所有勾选的功能的车模图或车模背景图');
    }
    return !tempStatus;
  }

  //  整理勾选功能图片数据
  formatVehicleColorList() {
    const { colorList, allList, imgList, imgData, colorStatus } = this.state;
    const checkedConfig = Object.values(imgList);
    let vehicleColorList: any = [];
    const tempList = colorStatus ? allList : colorList;
    tempList.forEach((colorItem: any) => {
      let tempZipInfo =  imgData[`${colorItem.id}__remote__0__remote`]
      let tempData: any = {
        vehicleColor: colorItem.id, //  传id（即车型颜色 sid）
        vehicleColorName: colorItem.title,
        remoteFileName: tempZipInfo ? tempZipInfo[0].fileName : '',
        remoteImgUrl: tempZipInfo ? tempZipInfo[0].fileUri : '',
        remoteImgList: []
      }
      checkedConfig.forEach((cfg: any) => {
        const { picType, id, code } = cfg
        if (picType === 'remote') {
          return;
        }
        let imgKey = `${colorItem.id}__${picType}__${id}__${code}`
        let tempImg, tempIndex = -1;
        tempData.remoteImgList.some((remote: any, idx: number) => {
          const state = remote.remoteCtlId === id
          if (state) {
            tempImg = remote
            tempIndex = idx
          }
          return state;
        })
        if (!tempImg) {
          tempImg = {
            remoteCtlId: cfg.id,
            remoteCtlCode: cfg.code,
            imgUrlMap: {
              imgUrl: '',
              imgBackgroundUrl: '',
            }
          }
        }
        let imgUrl = imgData[imgKey] ? imgData[imgKey][0]?.fileUri : '';
        if (picType === 'cmCheck') {
          tempImg.imgUrlMap.imgUrl = imgUrl ? imgUrl : ''
        } else {
          tempImg.imgUrlMap.imgBackgroundUrl = imgUrl ? imgUrl : '';
        }
        if (tempIndex === -1) {
          tempData.remoteImgList.push(tempImg);
        } else {
          tempData.remoteImgList[tempIndex] = tempImg;
        }
      })
      vehicleColorList.push(tempData);
    })
    return vehicleColorList;
  }

  //  移除反选功能的图片
  removeImgData = (keySuf: string) => {
    const { colorList, allList, imgData, colorStatus } = this.state;
    if (colorStatus) {
      allList.forEach((c: any) => {
        const tempKey = `${c.id}__${keySuf}`;
        delete imgData[tempKey];
      })
    } else {
      colorList.forEach((c: any) => {
        const tempKey = `${c.id}__${keySuf}`;
        delete imgData[tempKey];
      })
    }
  }

  //  是否区分车身颜色
  colorChange = (e: CheckboxChangeEvent) => {
    this.setState({
      colorStatus: e.target.checked,
      imgData: {},  //  清空图片数据
    })
  }

  //  获取不区分颜色状态
  getColorStatus = () => {
    const { colorStatus } = this.state;
    return colorStatus ? 1 : 0;
  }

  render() {
    const { treeData, colorList, imgList, colorStatus, allList } = this.state;
    const treeConfig = {
      treeData,
      defaultExpandAll: true,
      selectable: false,
      key: new Date().getTime(),
      titleRender: (nodeData: any) => {
        //  nodeData tree选项
        const checkChange = (e: CheckboxChangeEvent, name: string) => {
          const bool = e.target.checked;
          const keyName = `${nodeData.key}_${name}`;
          const isCmCheck = name === 'cmCheck';
          nodeData[name] = bool;
          //  name: cmCheck、bjCheck
          //  keyName: id-level_name
          let tempFunctionKey = `${nodeData.id}_${name}`;
          let tempImgKey = `${name}__${nodeData.id}__${nodeData.code}`;
          if (bool) {
            imgList[tempFunctionKey] = {
              key: keyName,
              id: nodeData.id,
              code: nodeData.code,
              picType: name,
              title: `${nodeData.title}${isCmCheck ? '车模图' : '车模背景图'}`,
            };
          } else {
            delete imgList[tempFunctionKey];
            this.removeImgData(tempImgKey);
          }
          this.setState({
            imgList,
            treeData,
          });
        };
        return (
          <div className="treeTextBox">
            <div className="treeItemText">{nodeData.title}</div>
            <div className="treeItemCheck">
              <Checkbox
                checked={nodeData.cmCheck}
                onChange={(e: CheckboxChangeEvent) => {
                  checkChange(e, 'cmCheck');
                }}
              ></Checkbox>
            </div>
            <div className="treeItemCheck">
              <Checkbox
                checked={nodeData.bjCheck}
                onChange={(e: CheckboxChangeEvent) => {
                  checkChange(e, 'bjCheck');
                }}
              ></Checkbox>
            </div>
          </div>
        );
      },
    };

    return (
      <div className={style.appImgBox}>
        <Row>
          <Col span={20} offset={2}>
            <Typography.Title level={5}>步骤一 选择需要上传图片的功能</Typography.Title>
            <div>
              <div className="treeTextBox">
                <div className="treeItemText">App功能名称</div>
                <div className="treeItemCheck">车模图</div>
                <div className="treeItemCheck">车模背景图</div>
              </div>
              <Tree {...treeConfig}></Tree>
            </div>
            <Typography.Title level={5}>
              步骤二 上传图片
              <Checkbox
                style={{
                  marginLeft: '30px',
                  fontWeight: 400,
                }}
                onChange={this.colorChange}
                checked={colorStatus}
              >
                不区分颜色
              </Checkbox>
            </Typography.Title>
            {colorStatus ? (
              <>
                {
                  allList.map(e => {
                    return (
                      <Card title={e.title} key={e.key}>
                        <Row gutter={[15, 20]}>{this.uploadImgFn(e)}</Row>
                      </Card>
                    );
                  })
                }
              </>
            ) : (
              <>
                {
                  colorList.map(e => {
                    return (
                      <Card title={e.title} key={e.key}>
                        <Row gutter={[15, 20]}>{this.uploadImgFn(e)}</Row>
                      </Card>
                    );
                  })
                }
              </>
            )}
          </Col>
          {/* {colorList.map(e => {
              return (
                <Card title={e.title} key={e.key}>
                  <Row gutter={[15, 20]}>{this.uploadImgFn(e)}</Row>
                </Card>
              );
            })} */}
        </Row>
      </div>
    );
  }
}
export default connect(mapStateToProps)(appImgConfig);
